<template>
	校区管理
	
	又忘了最高层div了
	
	<div class="item">
		
		<ly-flex style="height: 100px;border: 1px solid red;">
			<ly-fcenter style="width: 110px;height: 100px;background: yellow;">
				这里是
			</ly-fcenter>
			<ly-frow-center style="width: 100%;height: 100px;border: 1px solid green;padding: 0 10px;">
				内部的
			</ly-frow-center>
		</ly-flex>
		
		<el-divider>比较一下</el-divider>
		
		<ly-flex style="height: 100px;border: 1px solid red;">
			<ly-fcenter style="width: 100px;height: 100px;background: yellow;">
				这里是
			</ly-fcenter>
			<ly-frow-center style="flex:1;height: 100px;border: 1px solid green;padding: 0 10px;">
				内部的
			</ly-frow-center>
		</ly-flex>
		
	</div>
	
	<br> <br> <br> <br>
	
	<div>
		<div class="name" style="height: 200px;width: 100%;border: 1px solid red;display: flex;">
			<span style="height: 60px;">1</span>
			<span>2</span>
			<div style="border: 1px solid blue;flex: 1;">3</div>
			<ly-flex style="border: 4px solid hotpink;flex: 1;">
				我我我
				<ly-flex style="border: 1px solid red;flex:1;">
					里面
				</ly-flex>
			</ly-flex>
		</div>
	</div>
	
	<br>
	
	<ly-flex style="border: 1px solid red;height: 30px;">
		子元素使用flex 不会宽度百分百
		<ly-flex style="border:2px solid #00FFFF;">
			对的
		</ly-flex>
	</ly-flex>
	
	<br>
	
	<div style="border: 1px solid red; height: 20px;display: flex;">
		<ly-flex style="border: 1px solid red;">
			sa
		</ly-flex>
		<div style="display: flex;border: 2px solid darkgoldenrod;">
			aaa
		</div>
	</div>
	
	<br>
	
	<div style="border: 1px solid red; height: 100px;display: flex;">
		<ly-flex style="flex: 1;border: 1px solid #008000;">
			 父级使用flex  变宽 <br>
				子集竖着变高
		</ly-flex>
		<ly-flex>
			啊啊啊
			<ly-flex style="border: 1px solid red;flex:1;">
				nihao
			</ly-flex>
			<ly-flex style="border: 1px solid red;flex: 1;">
				大大
			</ly-flex>
		</ly-flex>
	</div>
	
	<br>
	
	<div style="border: 1px solid red;height: 300px;display: flex;flex-wrap: wrap;">
		1
		<div style="border: 3px solid green;width: 100%;">2</div>
		<div style="border: 3px solid blue;flex: 1;">3</div>
	</div>
	
	<br>
	
	<div style="border: 1px solid red; height: 100px;">
		<ly-flex>
			啊啊啊
			<ly-flex style="border: 1px solid red;flex:1;">
				nihao
			</ly-flex>
			<ly-flex style="border: 1px solid red;flex: 1;">
				大大
			</ly-flex>
		</ly-flex>
	</div>
	
	<br>
	
	<el-row>
	  <el-col :span="4"><div class="grid-content bg-purple">不好用</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple-light">因为：宽度不够智能</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple">应该，有设置px的另外的在重分24格</div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	
	<el-divider>剧中</el-divider>
	
	<div class="boxs" style="margin: auto;">1</div>
	<div class="boxs" style="position: absolute;left: -50%;right: -100%;">??? right失效</div>
	<div class="boxs" style="position: absolute;left: 50%;transform: translate(-50%, 0);">2</div>
	<div style="padding: 0 50%;">
		<div class="boxs">3</div>
	</div>
	<div style="display: flex;justify-content: center;">
		<div class="boxs">4</div>
	</div>
	<div style="position: fixed;">
		<div class="boxs">5</div>
	</div>
	
	<br>
	
	<div class="sjx">
		啦啦啦
	</div>
	
	<div class="tri"></div>
</template>

<script>
</script>

<style>
	.name>span{
		border: 1px solid green;
		flex: 1;
	}
	.boxs{
		width: 50px;
		height: 50px;
		background-color: plum;
		margin-bottom: 10px;
	}
	.sjx{
		/* https://www.cnblogs.com/chengxs/p/11406278.html */
		width: 0;
		height: 0;
		/* border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid red; */
		border-top: 50px solid transparent;
		border-right: 100px solid red;
		/* border-bottom: 50px solid transparent; */
	}
	.tri { width: 50px;
	/* https://blog.csdn.net/banou8086/article/details/101526004 */
            height: 50px;
            border-top: 50px solid red;
            border-bottom: 50px solid yellow;
            border-left: 50px solid green;
            border-right: 50px solid blue;}
	
						

	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }

</style>
